<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0">
    <title>my project</title>
    <script src="js/jquery-3.5.1.min.js"></script>
    <link rel="stylesheet" href="css/houdunren.css">

    <link rel="stylesheet" href="css/drawer.min.css">

    <!-- <link rel="stylesheet" href="css/new.css"> -->
    <!-- <link rel="stylesheet" href="css/mobile.css"> -->
    <!-- <link rel="stylesheet" href="css/search.css"> -->
    <!-- <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> -->
    <!-- 
        !important
        将此代码加到任何代码后面，会将此代码优先级最高，优先执行这行代码
     -->
    <style>
        /* 
            为什么清除浮动：（原因：由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响）
                由于父盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父盒子高度为0时，就会影响下面的标准流盒子：称为高度塌陷
                也就是说当父盒子不给高度时，父盒子内的子盒子使用了浮动，会使父盒子高度塌陷，造成下面的盒子会顶上来
        */


        /* @media screen and (min-device-width) {
                    括号内的代码意思是最小的屏幕宽度
        } */
        /* 
            常用属性
                width、height 浏览器可视宽度、高度
                device-width 设备屏幕的宽度
                device-height 设备屏幕的高度 
        */
        /* 窗口大于1200px时做出的改变 */
        /* @media screen and (min-width:1200px) {
            .header {
                background-color: blue;
            }
        } */
    </style>
    <!-- <link rel="stylesheet" href="css/common.css"> -->

    <!-- min-width:500 当窗口像素最小尺寸为1000时，引用的desktop表的样式 -->
    <!-- <link media="(min-device-width:1000px)" rel="stylesheet" href="css/desktop.css"> -->

    <!-- 这是手机端的，当尺寸为400px到600px之间的 引用的是mobile表的样式 -->
    <!-- <link media="(min-device-width:400px) and (max-device-width:600px)" rel="stylesheet" href="css/mobile.css"> -->

    <!-- 
        去除页面右侧滚动条
        <body style="overflow:-Scroll;overflow-y:hidden">  
        去除页面下方滚动条  
        <body style="overflow:-Scroll;overflow-x:hidden">
     -->
    <!-- <link rel="stylesheet" href="css/search.css"> -->

    <!-- 这里写适应手机端 -->
    <style>
        /* 这是手机端 小于768px */
        @media screen and (max-width:768px) {
            .body_box {
                width: 100%;
                height: 1200px;
            }

            .search-box {
                display: none;
            }

            .headertopone {
                display: none;
            }

            .btn01 {
                display: none;
            }

            .body_big {
                margin: auto;
            }


            .first_aa {
                width: 100%;
            }

            .smallone {
                display: none;

            }

            .bottom_page {
                margin-top: 850px;
            }

            .headertow ul li a {
                width: 70px;
                /* display: none; */
                float: left;
                margin-left: 20px;
            }

            .logo {
                margin-left: 5%;
            }

            /* .newa{
                width: 500px;
            } */
            .new {
                width: 100%;
                height: 800px;
                /* background-color: black; */
            }

            .newa {
                width: 70%;
                height: 40%;
            }

            .newa {
                background-size: 100%;
            }

            .newb {
                width: 70%;
                height: 40%;
            }

            .newb {
                background-size: 100%;
            }

            .newc {
                width: 70%;
                height: 40%;
            }

            .newc {
                background-size: 100%;
            }

            .newd {
                width: 70%;
                height: 40%;
            }

            .newd {
                background-size: 100%;
            }

        }

        /* 平板端 小于等于 768px ~ 小于 992px */
        @media screen and (min-width:769px) and (max-width:992px) {
            .body_box {
                width: 100%;
                height: 1200px;
            }

            .search-box {
                display: none;
            }

            .headertopone {
                display: none;
            }

            .btn01 {
                display: none;
            }

            .smallone {
                display: none;

            }

            .body_big {
                margin: auto;
            }

            .new {
                width: 100%;
                height: 800px;
                /* background-color: black; */
            }

            .bottom_page {
                margin-top: 850px;
            }

            .headertow ul li a {
                /* width: 50px; */
                /* display: none; */
                float: left;
            }

            .newa {
                width: 50%;
                height: 40%;
            }

            .newa {
                background-size: 100%;
            }

            .newb {
                width: 50%;
                height: 40%;
            }

            .newb {
                background-size: 100%;
            }

            .newc {
                width: 50%;
                height: 40%;
            }

            .newc {
                background-size: 100%;
            }

            .newd {
                width: 50%;
                height: 40%;
            }

            .newd {
                background-size: 100%;
            }


        }

        /* 中等屏幕 小于等于 992px ~ 小于 1200px */
        @media screen and (min-width:993px) and (max-width:1200px) {

            .body_box {
                width: 100%;
                height: 1200px;
            }

            .search-box {
                display: none;
            }

            .headertopone {
                /* display: none; */
                margin-left: 150px;
            }

            .btn01 {
                display: none;
            }

            .body_big {
                margin: auto;
            }


            .first_aa {
                width: 100%;
            }

            .smallone {
                display: none;

            }


            .bottom_page {
                margin-top: 1000px;
            }

            .headertow ul li a {
                width: 100px;
                /* display: none; */
                float: left;
                margin-left: 10px;
            }

            .newa {
                width: 40%;
                height: 30%;
            }

            .newa {
                background-size: 100%;
            }

            .newb {
                width: 40%;
                height: 30%;
            }

            .newb {
                background-size: 100%;
            }

            .newc {
                width: 40%;
                height: 30%;
            }

            .newc {
                background-size: 100%;
            }

            .newd {
                width: 40%;
                height: 30%;
            }

            .newd {
                background-size: 100%;
            }



        }

        /* 宽屏设备 大桌面显示器 大于等于1200px */
        @media screen and (min-width:1201px) {
            .new {
                display: none;
            }

            .headertow ul li a {
                margin-left: 10px;
            }
        }
    </style>


</head>

<body>

    <div class="header">
        <div class="headerone" id="time" style="margin-left: 100px;">
            <!-- <span>2 0 2 1 年 3 月 5 号</span> -->
        </div>
        <div class="headertow" style="margin-left: 10px;">
            <ul>
                <li><a href="./登录注册/index.html">登录</a></li>
                <li><a href="./登录注册/reg.html">注册</a></li>
                <!-- <li><a href="#">VIP</a></li> -->
                <!-- <button class="vipbtn">&nbsp&nbsp&nbspVIP</button> -->
            </ul>

        </div>
    </div>
    <header class="headertop">
        <div class="headerbig">
            <div class="headerbigs">
                <div class="logo"><a href="index.html"><img src="img/benkanglogo.png" alt=""></a></div>
                <div class="headertopone">
                    <ul class="nav">
                        <li>
                            <a href="https://www.51zxw.net/list.aspx?cid=354">计算机基础</a>
                        </li>
                        <li class="office">
                            <a href="http://www.wordlm.com/word/">office教程</a>
                            <!-- <ul>
                                <li><a href="#">WPS教程</a></li>
                                <li><a href="#">教程</a></li>
                            </ul> -->
                        </li>

                        <li><a href="#">租用账号</a></li>
                        <li><a href="#">联系我们</a></li>
                        <!-- <li><a href="#/">联系我们</a></li> -->
                        <!-- <li class="slide1"></li> -->
                        <!-- <li class="slide2"></li> -->
                    </ul>
                </div>
                <div class="headertoptow">

                    <!-- 全屏搜索框 -->
                    <!-- <div class="close-btn">
                        <span class="fa fa-times"></span>
                    </div>
                    <div class="wrapper">

                        <div class="search-btn">
                            <span class="fa fa-search"></span>
                        </div>
                        <div class="search-data">
                            <input type="text" required>
                            <div class="line"></div>
                            <label for="">type to search..</label>
                            <span class="fa fa-search"></span>

                        </div>

                    </div> -->
                    <!-- <input type="search-text" type="text" placeholder="" >
                    <a href="#">
                        <svg t="1615527983480" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3783" width="40" height="40"><path d="M888.68161 857.569677l-175.091014-175.091014a21.331751 21.331751 0 0 0-30.163096 0c-0.85327 0.85327-1.279905 1.919858-1.919858 2.858454-100.98451 98.382037-259.650076 112.162348-377.699987 32.338935C166.175196 624.669617 129.228603 438.059457 221.424431 301.621576A295.444755 295.444755 0 0 1 357.307687 192.061702a301.716289 301.716289 0 0 1 280.811173 30.632395 301.716289 301.716289 0 0 1 133.238118 248.941537 294.719475 294.719475 0 0 1-22.355675 114.082205 21.331751 21.331751 0 0 0 39.421076 16.297458 336.572371 336.572371 0 0 0 25.598102-130.550317 344.337128 344.337128 0 0 0-152.01006-284.138927A344.294465 344.294465 0 0 0 341.522191 152.512635 337.681622 337.681622 0 0 0 186.056388 277.772679c-105.378851 155.935101-63.227311 369.167287 93.859705 475.271417a344.635773 344.635773 0 0 0 193.180339 59.046287 341.180029 341.180029 0 0 0 225.177966-84.601725l160.244116 160.244115a21.246424 21.246424 0 0 0 30.163096 0 21.331751 21.331751 0 0 0 0-30.163096" p-id="3784"></path></svg>
                    </a> -->

                    <div class="search-box">
                        <input class="search-txt" type="text" placeholder="type to search">
                        <button class="search-btn" href="javascript">
                            <svg t="1615527983480" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="3783" width="40" height="30">
                                <path
                                    d="M888.68161 857.569677l-175.091014-175.091014a21.331751 21.331751 0 0 0-30.163096 0c-0.85327 0.85327-1.279905 1.919858-1.919858 2.858454-100.98451 98.382037-259.650076 112.162348-377.699987 32.338935C166.175196 624.669617 129.228603 438.059457 221.424431 301.621576A295.444755 295.444755 0 0 1 357.307687 192.061702a301.716289 301.716289 0 0 1 280.811173 30.632395 301.716289 301.716289 0 0 1 133.238118 248.941537 294.719475 294.719475 0 0 1-22.355675 114.082205 21.331751 21.331751 0 0 0 39.421076 16.297458 336.572371 336.572371 0 0 0 25.598102-130.550317 344.337128 344.337128 0 0 0-152.01006-284.138927A344.294465 344.294465 0 0 0 341.522191 152.512635 337.681622 337.681622 0 0 0 186.056388 277.772679c-105.378851 155.935101-63.227311 369.167287 93.859705 475.271417a344.635773 344.635773 0 0 0 193.180339 59.046287 341.180029 341.180029 0 0 0 225.177966-84.601725l160.244116 160.244115a21.246424 21.246424 0 0 0 30.163096 0 21.331751 21.331751 0 0 0 0-30.163096"
                                    p-id="3784"></path>
                            </svg>
                        </button>
                    </div>


                    <!-- <span class="jbj">
                        <a href="#">
                            <img src="img/svgfile/记笔记.svg" alt="笔记" style="position: relative;top: 8px;left: 2px;">
                        </a>
                    </span>
                    <span class="ltk">
                        <a href="#">
                            <img src="img/svgfile/聊天空.svg" alt="" style="margin-top: 12px;width: 30px;">
                        </a>
                    </span> -->


                    <a href="#" class="btn01">购买VIP</a>

                    <div class="right_taskbar">
                        <a href="#"><img src="img/svgfile/任务栏.svg" alt=""></a>
                    </div>

                </div>
            </div>
        </div>
    </header>

    <section class="body_box">

        <div class="bodyone">

            <!-- 大板块 540*610 -->
            <!-- 使用onclick = "window.open('地址链接')" 可以使单击div跳转页面 -->

            <div onclick="window.open('./资源分享/index.html')" class="body_big"
                style="background-image: url('imgs/computer6.jpg');cursor:pointer;">
                <!-- <img src="imgs/computer5.jpg" alt=""> -->
                <div class="first_aa">
                    <a href="#">资源分享</a>
                    <p>Resource sharing</p>
                </div>
            </div>

            <!-- 小版块 255*290 -->
            <div class="smallone">

                <div onclick="window.open('./电子书籍/index.html')" class="body_smalla"
                    style="background-image: url(imgs/desktop41.jpg);cursor:pointer;">
                    <div class="small_aa">
                        <a href="#">电子书籍</a>
                        <p>Electronic text</p>
                    </div>
                </div>


                <div class="body_smallb" style="background-image: url('imgs/desktop21.jpg');cursor:pointer;">
                    <div class="small_aa">
                        <a href="#">优质网站</a>
                        <p>Quality website</p>
                    </div>
                </div>




                <div onclick="window.open('./各式小源码/index.html')" class="body_smallc"
                    style="background-image: url('imgs/desktop51.jpg');cursor:pointer;">
                    <div class="small_aa">
                        <a href="#">各式小源码</a>
                        <p>All kinds of source code</p>
                    </div>
                </div>


                <div class="body_smalld" style="background-image: url(imgs/desktop01.jpg);cursor:pointer;">
                    <div class="small_aa">
                        <a href="#">共享资源</a>
                        <p>Shared resource</p>
                    </div>
                </div>

            </div>

        </div>

        <!-- 手机端小版块布局 -->
        <div class="new">
            <div onclick="window.open('./电子书籍/index.html')" class="newa"
                style="background-image: url(imgs/desktop4.jpg);cursor:pointer;">
                <div class="newaa">
                    <a href="#">电子书籍</a>
                    <p>Electronic text</p>
                </div>
            </div>


            <div onclick="window.open('./资/index.html')" class="newb"
                style="background-image: url('imgs/desktop21.jpg');cursor:pointer;">
                <div class="newaa">
                    <a href="#">优质网站</a>
                    <p>Quality website</p>
                </div>
            </div>
            <div onclick="window.open('./各式小源码/index.html')" class="newc"
                style="background-image: url('imgs/desktop51.jpg');cursor:pointer;">
                <div class="newaa">
                    <a href="#">各式小源码</a>
                    <p>All kinds of source code</p>
                </div>
            </div>
            <div class="newd" style="background-image: url(imgs/desktop01.jpg);cursor:pointer;">
                <div class="newaa">
                    <a href="#">共享资源</a>
                    <p>Shared resource</p>
                </div>
            </div>
        </div>


        </div>


    </section>

    <div class="bottom_page">
        <p>免责声明：此站所有素材及网站来源于网上，如有侵权请联系本站长</p>
        <p>QQ:905587987</p>
    </div>


    <script>
        $(".search-btn").click(function () {
            // 点击按钮背景变颜色
            $(".wrapper").addClass("active");
            // 显示完背景搜索按钮变不见
            $(this).css("display", "none");
            // 显示搜索框
            $(".search-data").fadeIn(500);
            $(".close-btn").fadeIn(500);
            $(".search-data .line").addClass("active");
            setTimeout(function () {
                $("input").focus();
                $(".search-data label").fadeIn(500);
                $(".search-data span").fadeIn(500);
            }, 800);
        });
        $(".close-btn").click(function () {
            $(".wrapper").removeClass("active");
            $(".search-btn").fadeIn(800);
            $(".search-data").fadeOut(500);
            $(".close-btn").fadeOut(500);
            $(".search-data .line").removeClass("active");
            $("input").val("");
            $(".search-data label").fadeOut(500);
            $(".search-data span").fadeOut(500);
        });
    </script>

    <!-- 动态时间 -->
    <script language="javascript">

        var t = null;

        t = setTimeout(time, 1000);//开始执行

        function time() {

            clearTimeout(t);//清除定时器

            dt = new Date();

            var y = dt.getYear() + 1900;

            var mm = dt.getMonth() + 1;

            var d = dt.getDate();

            var weekday = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];

            var day = dt.getDay();

            var h = dt.getHours();

            var m = dt.getMinutes();

            var s = dt.getSeconds();

            if (h < 10) { h = "0" + h; }

            if (m < 10) { m = "0" + m; }

            if (s < 10) { s = "0" + s; }

            document.getElementById("time").innerHTML =  y + " 年 " + mm + " 月 " + d + " 日 " + weekday[day] + "  "+h+": "+m+": "+s+"";

            t = setTimeout(time, 1000); //设定定时器，循环执行           

        }

    </script>

    <script src="less.js-2.5.3/less.js-2.5.3/index.js"></script>
</body>

<!-- <script src="js/script.js"></script> -->
<!-- <script src="js/佛祖永无bug.js"></script> -->

</html>